<template>
  <view class="register-container">
    <!-- 沉浸式导航栏 -->
    <s-nav-bar title="" :background="'transparent'" statusBar fixed immersive
      :titleStyle="{ color: '#ffff', fontWeight: 'bold' }" back :backStyle="{ color: '#fff' }"></s-nav-bar>

    <!-- 顶部装饰区域 -->
    <view class="top-decor">
      <view class="logo">
        <image class="logo-icon" src="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/logo.png" mode="widthFix">
        </image>
      </view>
    </view>

    <!-- 注册表单区域 -->
    <view class="register-form">
      <view class="form-title">用户注册</view>
      <view class="form-subtitle">订单管理系统</view>

      <!-- 隐藏的假输入框防止自动填充 -->
      <input type="text" style="display:none">
      <input type="password" style="display:none">

      <!-- 用户名输入框 -->
      <view class="input-group">
        <s-icon name="manager" size="22" color="#47c5c4" />
        <input class="input" type="text" placeholder="请输入用户名" placeholder-class="placeholder" v-model="username"
          autocomplete="off" />
      </view>

      <!-- 密码输入框 -->
      <view class="input-group">
        <s-icon name="lock" size="22" color="#47c5c4" />
        <input class="input" type="password" placeholder="请输入密码" placeholder-class="placeholder" v-model="password"
          autocomplete="new-password" />
      </view>

      <!-- 确认密码输入框 -->
      <view class="input-group">
        <s-icon name="lock" size="22" color="#47c5c4" />
        <input class="input" type="password" placeholder="请再次输入密码" placeholder-class="placeholder"
          v-model="confirmPassword" autocomplete="new-password" />
      </view>

      <!-- 手机号输入框 -->
      <view class="input-group">
        <s-icon name="phone-o" size="22" color="#47c5c4" />
        <input class="input" type="number" placeholder="请输入手机号" placeholder-class="placeholder" v-model="mobile"
          autocomplete="off" />
      </view>

      <!-- 真实姓名输入框（选填） -->
      <view class="input-group">
        <s-icon name="contact" size="22" color="#47c5c4" />
        <input class="input" type="text" placeholder="请输入真实姓名（选填）" placeholder-class="placeholder" v-model="realName"
          autocomplete="off" />
      </view>



      <!-- 注册按钮 -->
      <view class="register-btn" @click="handleRegister">
        <text>注 册</text>
      </view>

      <!-- 已有账号登录 -->
      <view class="login-link">
        <text>已有账号？</text>
        <text class="link" @click="goToLogin">立即登录</text>
      </view>
    </view>

    <!-- 底部版权信息 -->
    <view class="footer">
      <view class="copyright"></view>
    </view>
  </view>
</template>

<script>
import ajax from '@/common/sju.ajax.js';
import md5 from '@/common/md5.min.js';

export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
      mobile: '',
      realName: ''
    };
  },


  methods: {


    // 处理注册逻辑
    handleRegister() {
      // 表单验证
      if (!this.username) {
        uni.showToast({ title: '请输入用户名', icon: 'none' });
        return;
      }

      if (!this.password) {
        uni.showToast({ title: '请输入密码', icon: 'none' });
        return;
      }

      if (this.password !== this.confirmPassword) {
        uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
        return;
      }

      if (!this.mobile) {
        uni.showToast({ title: '请输入手机号', icon: 'none' });
        return;
      }

      // 简单的手机号格式验证
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
        return;
      }

      // 显示加载中
      uni.showLoading({ title: '注册中...', mask: true });

      // 构造请求数据
      const requestData = {
        username: this.username,
        password: this.password, // 密码使用md5加密
        mobile: this.mobile,
        real_name: this.realName || ''
      };

      // 实际调用注册API
      ajax.post('/user/register', requestData, (res) => {
        uni.hideLoading();
        if (res.code === 200) {
          uni.showToast({
            title: '注册成功',
            icon: 'success',
            success: () => {
              // 注册成功后跳转到登录页面
              setTimeout(() => {
                uni.navigateTo({
                  url: '/pages/user/login'
                });
              }, 1500);
            }
          });
        }
      }, true);
    },

    // 跳转到登录页面
    goToLogin() {
      uni.navigateTo({
        url: '/pages/user/login'
      });
    }
  }
};
</script>

<style lang="scss">
.register-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--v-bg);
}

/* 顶部装饰区域 */
.top-decor {
  width: 100%;
  height: 280rpx;
  background: var(--v-linear);
  border-radius: 0 0 80rpx 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .logo {
    width: 120rpx;
    height: 120rpx;
    color: #fff;
    border-radius: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo-icon {
      width: 88rpx;
    }
  }
}

/* 注册表单区域 */
.register-form {
  flex: 1;
  padding: 50rpx 40rpx;
  display: flex;
  flex-direction: column;

  .form-title {
    font-size: 44rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }

  .form-subtitle {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 50rpx;
  }
}

/* 输入框组 */
.input-group {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20rpx;
  padding: 0 30rpx;
  height: 90rpx;
  margin-bottom: 25rpx;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

  .input {
    flex: 1;
    height: 100%;
    padding-left: 20rpx;
    font-size: 30rpx;
  }

  .placeholder {
    color: #aaa;
    font-size: 30rpx;
  }
}

/* 注册按钮 */
.register-btn {
  height: 90rpx;
  background: var(--v-linear);
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 34rpx;
  font-weight: bold;
  margin-top: 40rpx;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}

/* 登录链接 */
.login-link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
  font-size: 28rpx;
  color: #666;

  .link {
    color: var(--v-theme);
    margin-left: 10rpx;
    text-decoration: underline;
  }
}

/* 底部版权信息 */
.footer {
  padding: 20rpx 0;

  .copyright {
    text-align: center;
    color: #999;
    font-size: 22rpx;
  }
}
</style>